<template>
  <div class="questions-randoms-container">
    <el-card>
      <!-- 搜索区域 -->
      <el-form label-width="80px" size="small">
        <el-row>
          <el-col :span="6">
            <el-form-item label="关键字">
              <el-input
                style="width: 250px"
                placeholder="根据编号搜索"
                v-model="queryInfo.keyword"
                @keyup.enter.native="search"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="12">
            <el-form-item style="text-align: right">
              <el-button size="small" @click="clean">清除</el-button>
              <el-button type="primary" size="small" @click="search"
                >搜索</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <!-- 提示框 -->
      <el-alert
        :title="`数据一共有${total}条`"
        type="info"
        show-icon
        :closable="false"
      >
      </el-alert>

      <!-- 数据列表 -->
      <el-table :data="questionsList" style="width: 100%">
        <el-table-column prop="id" label="编号" width="220px">
        </el-table-column>
        <el-table-column label="题型" width="80px">
          <template #default="{ row }">
            {{ formatQuestionType(row.questionType) }}
          </template>
        </el-table-column>
        <el-table-column label="题目编号" width="220px">
          <template #default="{ row }">
            <div v-for="item in row.questionIDs" :key="item.number">
              <a
                href="#"
                style="color: #09f"
                @click.prevent="openDialog(item.id)"
              >
                {{ item.number }}</a
              >
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="addTime" label="录入时间" width="180px">
        </el-table-column>
        <el-table-column prop="totalSeconds" label="答题时间(s)" width="width">
        </el-table-column>
        <el-table-column prop="accuracyRate" label="正确率(%)" width="width">
        </el-table-column>
        <el-table-column prop="userName" label="录入人" width="width">
        </el-table-column>
        <el-table-column label="操作" width="80px">
          <template #default="{ row }">
            <el-button
              plain
              type="danger"
              size="small"
              circle
              icon="el-icon-delete"
              @click="delQuestion(row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页组件 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.page"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        background
      >
      </el-pagination>
    </el-card>

    <!-- 问题预览对话框 -->
    <QuestionsPreview
      ref="dialog"
      :showDialog.sync="showDialog"
    ></QuestionsPreview>
  </div>
</template>

<script>
// 导入枚举类型
import { questionType } from '@/api/hmmm/constants.js'
// 导入获取组题列表和删除问题的方法
import { randoms as getQuestionsListApi, removeRandoms as delQuestionApi } from '@/api/hmmm/questions.js'
// 导入问题预览组件
import QuestionsPreview from '../components/questions-preview.vue'
export default {
  components: {
    QuestionsPreview
  },
  data () {
    return {
      // 组题列表
      questionsList: [],
      // 分页组件的total
      total: 0,
      // 分页查询参数
      queryInfo: {
        page: 1,
        pagesize: 10,
        keyword: ''
      },
      // 题型的枚举类型
      questionType,
      // 控制对话框的显示与隐藏
      showDialog: false
    }
  },
  created () {
    this.getQuestionsList()
  },
  methods: {
    // 获取组题列表
    async getQuestionsList () {
      const { data } = await getQuestionsListApi(this.queryInfo)
      // console.log(data)
      this.questionsList = data.items
      this.total = data.counts
    },
    // 监听当前页面pagesize的改变
    handleSizeChange (newSize) {
      this.queryInfo.pagesize = newSize
      this.getQuestionsList()
    },
    // 监听当前页面页码的改变
    handleCurrentChange (newPageNum) {
      this.queryInfo.page = newPageNum
      this.getQuestionsList()
    },
    // 格式化题型 -> 1:单选 2.多选 3.简答
    formatQuestionType (type) {
      const map = {}
      questionType.forEach(item => {
        map[item.value] = item.label
      })
      return map[type]
    },
    // 搜索功能
    search () {
      this.getQuestionsList()
    },
    // 删除功能
    async delQuestion (row) {
      try {
        console.log('id', row.id)
        await this.$confirm(`确认删除${row.id}这个问题吗?`)
        await delQuestionApi({ id: row.id })
        // console.log(data)
        // 修复删除最后一页数据页码正确，但数据显示错误的bug
        const newPage = Math.ceil((this.total - 1) / this.queryInfo.pagesize)
        if (this.queryInfo.page > newPage) {
          this.queryInfo.page = newPage
        }
        this.getQuestionsList()
        this.$message.success('删除成功')
      } catch (error) {
        console.log(error)
        this.$message.info('取消了删除')
      }
    },
    // 打开对话框
    openDialog (id) {
      this.showDialog = true
      this.$refs.dialog.openDialog(id)
    },
    // 清除功能
    clean () {
      this.queryInfo.keyword = ''
      this.getQuestionsList()
    }
  }
}
</script>

<style lang="scss" scoped>
.questions-randoms-container {
  padding: 10px 10px;
}
.el-alert {
  margin-bottom: 15px;
}
.el-pagination {
  margin-top: 20px;
  text-align: center;
}
</style>
